<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/member.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">用户数量</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.users_count }}</div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/member.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">当天充值（人民币）</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.recharge_today }} </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/member.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">充值累计（人民币）</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.recharge_total }} </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/member.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">用户钱包金币余额</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.users_balance_sum }}</div>
                </el-card>
            </el-col>

            <el-col :span="6" style="margin-top: 20px;">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/article.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">在线用户数量</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.users_oline_count }}</div>
                </el-card>
            </el-col>

            <el-col :span="6" style="margin-top: 20px;">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/article.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">当天手续费（金币）</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.charges_today }}</div>
                </el-card>
            </el-col>

            <el-col :span="6" style="margin-top: 20px;">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/article.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">累积手续费（金币）</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.charges_total }}</div>
                </el-card>
            </el-col>

            <el-col :span="6" style="margin-top: 20px;">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/article.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">当天提现到账（人民币）</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.withdraw_today }}</div>
                </el-card>
            </el-col>
            <el-col :span="6" style="margin-top: 20px;">
                <el-card shadow="hover">
                    <div class="flex align-center">
                        <div>
                            <img fit="cover" src="@/assets/image/article.png" style="width: 30px; height: 30px" />
                        </div>
                        <div class="font-20 pl-10">提现累计（人民币）</div>
                    </div>
                    <div class="text-center pt-10 font-28 weight-500">{{ res.withdraw_total }}</div>
                </el-card>
            </el-col>
        </el-row>

        <el-card class="mt-10">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-card class="mt-10">
                        <div>
                            <h3>当月新增用户走势</h3>
                            <div ref="chart" style="width:100%;height:376px"></div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="mt-10">
                        <div>
                            <h3>当月用户充值走势</h3>
                            <div ref="userRecharge" style="width:100%;height:376px"></div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>



        <el-card class="mt-10">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-card class="mt-10">
                        <div>
                            <h3>当月用户花费走势</h3>
                            <div ref="expend" style="width:100%;height:376px"></div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>


        <!-- <el-card class="mt-10">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-card shadow="always">
                        <div ref="order" style="width: 100%; height: 300px"></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="always">
                        <div ref="sale" style="width: 100%; height: 300px"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            res: {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            // this.drawChartWithOrder()
            // this.drawChartWithMealSale()
            this.getDate()
        })


    },
    methods: {
        getDate(id) {
            this.$request.get('/user/users_count').then((res) => {
                // this.$message.success('删除成功')
                this.res = res
                console.log("getDate", res)
                // 创建一个表示当前日期的Date对象
                var currentDate = new Date();

                // 获取当前月份
                var currentMonth = currentDate.getMonth();

                // 获取下个月的第一天
                var nextMonthFirstDay = new Date(currentDate.getFullYear(), currentMonth + 1, 1);

                // 获取当前月份的最后一天
                var currentMonthLastDay = new Date(nextMonthFirstDay - 1);

                // 获取当前月份的天数
                var numberOfDays = currentMonthLastDay.getDate();

                const chart = this.$refs.chart

                if (chart) {
                    const myChart = this.$echarts.init(chart)
                    const option = {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [],
                                type: 'line'
                            }
                        ]
                    };
                    for (let i = 1; i <= numberOfDays; i++) {
                        option.xAxis.data.push(i)
                    }
                    for (let i = 1; i <= numberOfDays; i++) {
                        option.series[0].data.push(0)
                    }
                    let date;
                    for (let i = 0; i < res.month_user_increase.length; i++) {
                        console.log(res.month_user_increase[i].date)
                        //  date.push(parseInt(res.month_user_increase[i].date.substring(5,7)))
                        date = parseInt(res.month_user_increase[i].date.substring(8))
                        console.log(res.month_user_increase[i].count)
                        option.series[0].data[date] = res.month_user_increase[i].count
                    }
                    myChart.setOption(option)
                }

                const userRecharge = this.$refs.userRecharge
                if (userRecharge) {
                    const myUserRecharge = this.$echarts.init(userRecharge)
                    const option = {
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [],
                                type: 'line'
                            }
                        ]
                    };
                    for (let i = 1; i <= numberOfDays; i++) {
                        option.xAxis.data.push(i)
                    }
                    for (let i = 1; i <= numberOfDays; i++) {
                        option.series[0].data.push(0)
                    }
                    let date;
                    for (let i = 0; i < res.month_recharge.length; i++) {
                        console.log(res.month_recharge[i].date)
                        //  date.push(parseInt(res.month_user_increase[i].date.substring(5,7)))
                        date = parseInt(res.month_recharge[i].date.substring(8))
                        option.series[0].data[date] = res.month_recharge[i].count
                    }
                    myUserRecharge.setOption(option)

                }


                const expend = this.$refs.expend
                if (expend) {
                    const myExpend = this.$echarts.init(expend)
                    const option = {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['回扣', '礼物', '打赏', '私人定制', '1v1密聊','同城','长视频','短视频','邀请返利','直播','系统']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: []
                    };
                    for (let i = 1; i <= numberOfDays; i++) {
                        option.xAxis.data.push(i)
                    }
                    // for (let i = 1; i <= numberOfDays; i++) {
                    //     option.series[0].data.push(0)
                    // }
                    let date;

                    console.log('res.user_trading_balance.expend',res.user_trading_balance.expend)

                   
                    option.series = res.user_trading_balance.expend
                    console.log(' option.series.push',option.series)
                    myExpend.setOption(option)

                }



            })
        },



        drawChartWithMealSale() {
            let myChart = this.$echarts.init(this.$refs.sale)
            let option = {
                title: {
                    text: '商品销量前10',
                },
                legend: {
                    top: 'bottom',
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true },
                    },
                },
                series: [
                    {
                        name: 'Radius Mode',
                        type: 'pie',
                        radius: [20, 120],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5,
                        },
                        data: [
                            { value: 40, name: 'rose 1' },
                            { value: 38, name: 'rose 2' },
                            { value: 32, name: 'rose 3' },
                            { value: 30, name: 'rose 4' },
                            { value: 28, name: 'rose 5' },
                            { value: 26, name: 'rose 6' },
                            { value: 22, name: 'rose 7' },
                            { value: 18, name: 'rose 8' },
                        ],
                    },
                ],
            }
            myChart.setOption(option)
        },
        drawChartWithOrder() {
            let myChart = this.$echarts.init(this.$refs.order)
            let option = {
                title: {
                    text: '订单近30天走势',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    data: ['数量', '金额'],
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                    },
                ],
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: '#67c23a',
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        data: [120, 132, 101, 134, 90, 230, 210],
                    },
                    {
                        name: '金额',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: 'orange',
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        data: [220, 182, 191, 234, 290, 330, 310],
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
    },
}
</script>

<style></style>